<script setup>
import { ref } from 'vue'
import { getRateService } from '@/apis/center'
import { useUserStore } from '@/stores/user'
import CardContainer from '@/components/CardContainer.vue'
const UserStore = useUserStore()

// 存储房源评价信息
const evaluateInfoList = ref([])

// 实现分页需要的参数
const pageSize = ref(3)
const page = ref(1)
const total = ref(null)

// 获取用户评价信息需要的参数
const rateItem = ref({
  id: UserStore.UserList.id,
  pageSize: pageSize.value,
  page: page.value
})

// 封装获取用户评价的函数
const getRateInfo = async () => {
  const res = await getRateService(rateItem.value)
  evaluateInfoList.value = res.data.data.rows
  total.value = res.data.data.count
}

// 处理页码变化
const handleCurrentChange = (newPage) => {
  rateItem.value.page = newPage
  getRateInfo()
}

// 处理页面显示数据条数变化
const handleSizeChange = (newSize) => {
  rateItem.value.pageSize = newSize
  getRateInfo()
}

defineExpose({
  getRateInfo
})
</script>

<template>
  <h2>我的评价</h2>
  <div class="container" v-if="evaluateInfoList.length">
    <CardContainer v-for="item in evaluateInfoList" :key="item.id">
      <template #extra>
        <div class="card-header">
          <div class="image">
            <img :src="item.property.image_url.interior_img[0].url" alt="" />
          </div>
          <span>{{ item.property.title }}</span>
        </div>
      </template>

      <div class="content">
        <el-rate v-model="item.rating" size="large" disabled />
        <p>{{ item.comment }}</p>
      </div>

      <template #footer>
        {{ item.user.username }}
      </template>
    </CardContainer>
  </div>

  <el-empty v-else :image-size="200" />

  <!-- 分页区域 -->
  <div class="pagination">
    <el-pagination
      background
      layout="jumper,total,sizes,prev,pager,next"
      :page-sizes="[2, 3]"
      v-model:current-page="page"
      v-model:page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="total"
    ></el-pagination>
  </div>
</template>

<style lang="scss" scoped>
.container {
  width: auto;
  display: flex;
  justify-content: space-around;

  .card {
    width: 350px;
    height: 600px;
    margin: 10px;

    .card-header {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      width: 300px;
      height: 200px;

      .image {
        width: 200px;
        height: 110px;
        margin-bottom: 10px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      span {
        font-size: 16px;
        margin: 5px 0;
      }
    }

    .content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      font-size: 16px;
      height: 250px;

      p {
        margin-top: 10px;
      }

      ::v-deep .el-icon {
        font-size: 30px;
      }
    }
  }
}

.pagination {
  margin: 40px;
  margin-left: 400px;
}
</style>
